<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最简单的轮播效果</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .slideshow {
            height: 300px;
            width: 765px;
            margin: 0 auto;
            margin-top: 100px;
            overflow: hidden;
            position: relative;
            z-index:55;
        }

        .slideshow .btn {
            height: 50px;
            width: 100%;
            position: absolute;
            top: 45%;
            z-index: 2;
        }

        .slideshow .ra-show {
            height: 20px;
            position: absolute;
            bottom: 20px;
            left: 45%;
            z-index: 2;
        }

        .ra-show i {
            width: 18px;
            height: 18px;
            display: inline-block;
            border-radius: 50px;
            background: #efefef;
            font-size: 12px;
            line-height: 18px;
            text-align: center;
            cursor: pointer;
        }

        .slideshow .ra-show .active {
            background: #ff9000;
            box-shadow: 0 0 10px #FF9000;
        }

        .btn span {
            height: 50px;
            width: 50px;
            background-color: rgba(0, 0, 0, 0.2);
            line-height: 50px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            color: #ffffff;
        }

        .btn span:hover {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .btn .last-img {
            float: left;
        }

        .btn .next-img {
            float: right;
        }

        .slideshow ul {
            position: relative;
        }

        /*.slideshow ul li {*/
            /*height: 300px;*/
            /*!*width: 500px;*!*/
            /*list-style: none;*/
            /*position: absolute;*/
            /*!*display: none;*!*/
        /*}*/

        .slideshow ul li:nth-child(1) {
            z-index: 2;
        }

        .slideshow ul li:hover {
            cursor: pointer;
        }

        .slideshow ul li img {
            height: 300px;
            width: 500px;
        }
    </style>
</head>
<body>
<div class="slideshow" id="slideshow">
    <div class="btn">
        <span class="last-img">&lt;</span><span class="next-img">&gt;</span>
    </div>
    <div class="ra-show">
        <i class="active"></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
    <ul>
        <li>
            <a target="_blank" href="https://graphicinformation.nxin.com/hit/389">
                <img src="https://files.nxin.com/public/yuantu/2017/12/28/66/56073cfe-e9ff-45ae-8aab-ec4ab426207c.png" alt="柑橘资讯" style="width:100%">
            </a>
        </li>
        <li>
            <a target="_blank" href="https://graphicinformation.nxin.com/hit/390">
                <img src="https://files.nxin.com/public/yuantu/2017/12/28/cc/7d27a670-9dd6-4591-8f5f-a9af7dcc9d64.jpg" alt="运营中心" style="width:100%">
            </a>
        </li>
        <li>null</li>
        <li>null</li>
        <li>null</li>
    </ul>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    jQuery.ajax({
        dataType: 'jsonp',
        async:false,
        // url: 'http://graphicInformation.t.nxin.com/graphicInformationDtl/272',
        url: 'http://graphicinformation.t.nxin.com/graphicInformationDtlList/130',
        success: function (data) {
            var cdata = data.content;
            // var cdata = "<ul><li><a target=\"_blank\" href=\"https://graphicinformation.nxin.com/hit/389\"><img src=\"https://files.nxin.com/public/yuantu/2017/12/28/66/56073cfe-e9ff-45ae-8aab-ec4ab426207c.png\" alt=\"鏌戞璧勮\" style=\"width:100%\"/></a></li><li><a target=\"_blank\" href=\"https://graphicinformation.nxin.com/hit/390\"><img src=\"https://files.nxin.com/public/yuantu/2017/12/28/cc/7d27a670-9dd6-4591-8f5f-a9af7dcc9d64.jpg\" alt=\"杩愯惀涓績\" style=\"width:100%\"/></a></li></ul>";
            // $("#slideshow").html(cdata)
            // $('#slideshow').append(cdata);
            //声明一个变量，下面的时候通过算术方法改变变量的值
            var current = 0;
            //初始化数据
            var timer = null;
            var pre = null;
            var nex = null;
            var li_v = $('#slideshow ul li');
            var i_v = $('.ra-show i');
            i_v.eq(0).addClass("active");
            $(document).ready(function() {
                // div
                // var li_v = $('#slideshow ul li');
                // 页码

                // i_v.eq(0).addClass("active");
                //设置自动播放
                function mover() {
                    //首先清除当前current以外的li_v的样式显示和伪圆标i_v的效果, 以下的同上
                    li_v.hide();
                    //                i_v.eq(current).removeClass("active");
                    i_v.removeClass("active");
                    current = (current + 1) % (li_v.length);
                    console.log(current);
                    //当鼠标放在伪圆标时候获取当前的索引值，并把它赋给current从而实现了移出鼠标的时候跳转到下一个图片轮播
                    i_v.mouseover(function() {
                        current = $(this).index();
                        //                    console.log($(this).index());
                    });
                    //当鼠标放在伪圆标时候获取当前的索引值，并把它赋给current从而实现下一个图片轮播
                    li_v.eq(current).fadeIn(1000);
                    i_v.eq(current).addClass("active");
                };
                //设置自动轮播
                timer = setInterval(mover, 50000);
                //鼠标划入的时候停止轮播
                li_v.mouseover(function() {
                    clearInterval(timer);
                });
                //鼠标移出的时候继续轮播
                li_v.mouseout(function() {
                    timer = setInterval(mover, 5000);
                });
                //实现左右按钮事件
                //点击左按钮事件
                $(".last-img").click(function() {
                    //    首先清除定时器
                    clearInterval(timer);
                    clearInterval(pre);
                    //实现点击按钮显示上一个图片代码
                    function last_v() {
                        li_v.hide();
                        i_v.removeClass("active");
                        current = (current - 1 + li_v.length) % (li_v.length);
                        //console.log(current);
                        li_v.eq(current).fadeIn(1000);
                        i_v.eq(current).addClass("active");
                    };
                    pre = setTimeout(last_v, 10);
                    timer = setInterval(mover, 5000);
                });
                //点击右按钮事件
                //只需继续轮播就可以
                $(".next-img").click(function() {
                    //    首先清除定时器
                    clearInterval(timer);
                    clearInterval(nex);
                    //console.log(current);
                    //调用自动轮播的代码和点击上一张图片代码的setTimeout
                    nex = setTimeout(mover, 10);
                    timer = setInterval(mover, 5000);
                });
                //添加伪类下标圆标动事件
                //鼠标碰到伪圆标的时候显示所对应的图片并且停止页面。
                i_v.mouseover(function() {
                    clearInterval(timer);
                    i_v.removeClass("active");
                    li_v.hide();
                    li_v.eq($(this).index()).fadeIn(1000);
                    $(this).addClass("active");
                });
            });
        }
    });
</script>
</body>
</html>
